#include("/static/themes/dolphin/layout/layout.html")
#@layout()
#define css()
<link rel="stylesheet" href="/static/admin/pages/photos/css/index.css">
<link rel="stylesheet" href="/static/public/libs/viewerjs/viewer.css">
<script src="/static/admin/pages/photos/js/laysize.js"></script>
#end
#define content()
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1>相册-#(photos.name)</h1>
                <div class="layui-row">
                    <input name="id" id="id" value="#(photos.id)" style="display: none">
                    <input name="isEncryption" id="isEncryption" value="#(photos.isEncryption)" style="display: none;">
                    <div class="photos-detail">
                        <span><i class="layui-icon layui-icon-picture-fine"></i>&nbsp;标题:  #(photos.name)</span>
                        <span><i class="layui-icon layui-icon-date"></i>&nbsp;日期:  #(photos.name)</span>
                        <span><i class="layui-icon layui-icon-about"></i>&nbsp;描述:  #(photos.name)</span>
                    </div>
                    #if(photos.isEncryption == 1)
                    <div class="password-verify">
                        <input name="password" type="password" id="password" placeholder="请输入密码访问">
                        <button id="submit">提交</button>
                    </div>
                    #end

                    <div class="layui-row photo-list" id="photo-list">

                    </div>
                    <div id="laypage">

                    </div>
                </div>
            </section>
        </div>

    </div>
</div>
</div>
#end
#define js()
<script id="photoTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2 photos-box">
        <a class="photos">
            <img src="/static/admin/pages/photos/img/loading.gif" alt="{{item.name}}" class="lazyload coverImg"
                 data-src="{{item.url}}">
        </a>
    </div>
    {{#  }); }}
</script>
<script src="/static/public/libs/viewerjs/viewer.min.js"></script>
<script>
    var viewer = new Viewer(document.getElementById('photo-list'), {
        url: 'data-src',
        title: 'alt',
        zIndex: 99999
    });

    let layer, laytpl, laypage;
    layui.use(['layer', 'laytpl', 'laypage'], function () {
        layer = layui.layer;
        laytpl = layui.laytpl;
        laypage = layui.laypage;
        let page = 1;
        let limit = 18;

        $("#submit").click(function () {
            let password = $("#password").val();
            if (password === "" || password === null) {
                layer.msg("请输入密码", {icon: 2});
                return;
            }
            loadData();
        });

        if ($("#isEncryption").val() !== 1 && $("#isEncryption").val() !== "1") {
            loadData();
        }

        function loadData() {
            $.ajax({
                type: "POST",
                url: "/api/photos/photoList",
                contentType: "application/json",
                data: JSON.stringify({
                    pageIndex: page,
                    pageSize: limit,
                    form: {
                        photosId: $("#id").val(),
                        password: $("#password").val()
                    }
                }),
                success: function (data) {
                    if (data.code === 200) {
                        $(".password-verify").hide();
                        if (data.total <= 0) {
                            $(".photo-list").html(
                                `<div class="no-content">这里什么都没有~</div>`
                            );
                            return;
                        }
                        laytpl($("#photoTpl").html()).render(data.data, function (html) {
                            $(".photo-list").html(html);
                        });
                        laypage.render({
                            elem: 'laypage',
                            count: data.total,
                            limit: limit,
                            curr: page,
                            jump: function (obj, first) {
                                page = obj.curr;
                                limit = obj.limit;
                                if (!first) {
                                    loadData()
                                }
                            }
                        });
                        viewer.update();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg("加载图片列表失败", {icon: 2});
                }
            });
        }
    });
</script>
#end
